<template>
  <!--查看和审批对话框-->
  <div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="考试名称" prop="examName">
          <el-input v-model="form.examName" placeholder="请输入考试名称" clearable :style="{width: '100%'}" :readonly="taskName!=='调整申请'">
          </el-input>
        </el-form-item>
        <el-form-item label="使用班级" prop="examClass">
          <el-input v-model="form.examClass" placeholder="请输入使用班级" clearable :style="{width: '100%'}" :readonly="taskName!=='调整申请'">
          </el-input>
        </el-form-item>
        <el-form-item label="考试类型" prop="examType">
          <el-select v-model="form.examType" placeholder="请选择考试类型" :disabled="taskName!=='调整申请'">
            <el-option
              v-for="dict in examTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否开卷" prop="examDecoil" >
          <el-switch v-model="form.examDecoil" :disabled="taskName!=='调整申请'"
                     active-text="开卷"
                     active-value="1"
                     inactive-text="闭卷"
                     inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="考试开始时间" prop="examStartTime">
          <el-date-picker clearable size="small" style="width: 200px" :disabled="taskName!=='调整申请'"
                          v-model="form.examStartTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试结束时间" prop="examEndTime">
          <el-date-picker clearable size="small" style="width: 200px" :disabled="taskName!=='调整申请'"
                          v-model="form.examEndTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="试卷附件" prop="examFile">
          <el-upload v-if="taskName ==='调整申请'"
            :disabled="isUploadDone"
            :limit="1"
            ref="examFile"
            :show-file-list="false"
            :action="examFileAction"
            :before-upload="examFileBeforeUpload"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :headers="headers"
            accept=".pdf">
            <el-button :disabled="isUploadDone" size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
          </el-upload>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-download"
            @click="handleDownload(form.examFile)"
          >下载</el-button>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :readonly="taskName!=='调整申请'"/>
        </el-form-item>
      </el-form>
      <view-verify
        :open.sync="open"
        :row="row"
        :taskId="taskId"
        :type="type"
      />
    </el-dialog>
  </div>
</template>

<script>
import ViewVerify from "@/components/Activiti/ViewVerify/index";
import {getToken} from "@/utils/auth";
export default {
  name: "examForm",
  components: {
    ViewVerify,
  },
  props: {
    row: {
      type: Object,
    },
    taskId: {
      type: String,
    },
    taskName: {
      type: String,
    },
    type: {
      type: String,
      default: 'none',
    },
  },
  data() {
    return {
      title: '试卷审批',
      form: this.row,
      open: false,
      examTypeOptions: [],
      rules: {
        examName: [
          {required: true, message: '请输入考试名称', trigger: 'blur'}
        ],
        examClass: [
          {required: true, message: '请输入使用班级', trigger: 'blur'}
        ],
        examType: [
          {required: true, message: '考试类型不能为空', trigger: 'blur'}
        ],
        examDecoil: [
          {required: true, message: '是否开卷不能为空', trigger: 'blur'}
        ],
        examStartTime: [
          {required: true, message: '考试开始时间不能为空', trigger: 'blur'}
        ],
        examEndTime: [
          {required: true, message: '考试结束时间不能为空', trigger: 'blur'}
        ],
        examFile: [
          {required: true, message: '试卷附件不能为空', trigger: 'blur'}
        ],
      },
      examFileAction: process.env.VUE_APP_BASE_API +'/common/upload',
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      isUploadDone:false,
    }
  },
  created() {
    this.getDicts("biz_exam_type").then(response => {
      this.examTypeOptions = response.data;
    });
  },
  methods:{
    examFileBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5
      if (!isRightSize) {
        this.$message.error('文件大小超过 5MB')
      }
      let isAccept = new RegExp('.pdf').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择.pdf类型的文件')
      }
      this.uploadLoading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return isRightSize && isAccept
    },
    handleUploadSuccess(res) {
      console.log(res)
      this.$emit("input", res.url);
      this.form.examFile = res.fileName
      this.$message({
        type: "success",
        message: "上传成功",
      });
      this.$data.isUploadDone = true;
      this.$refs.form.validateField('examFile')
      this.uploadLoading.close();
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.$data.isUploadDone = false;
      this.uploadLoading.close();
    },
    // 文件下载处理
    handleDownload(row) {
      var url = process.env.VUE_APP_BASE_API+row;
      console.log(url)
      const a = document.createElement('a')
      a.setAttribute('download', row)
      a.setAttribute('target', '_blank')
      a.setAttribute('href', url)
      a.click()
    }
  }
}
</script>

<style scoped>

</style>
